<template>
  <!-- 添加病人页面 -->
  <div class="addPatient_wrap medical_detail_wrap">
    <!-- 标题 -->
    <div class="docCon_title add_medical_title">
      <h2 class="lookMedical">
        <router-link to="HospitalizationManagement">
          <span>住院管理</span>
        </router-link>
      </h2>
      <h2 class="add_medical_hover">
        <router-link to="/AddPatient">
          <span>添加病人</span>
        </router-link>
      </h2>
    </div>
    <!-- 内容 -->
    <div class="docCon_main">
      <!-- 一, 病历夹 -->
      <div class="medicalDetail_title">
        <div class="medicalDetail_title_left">添加住院信息</div>
        <div class="medicalDetail_title_right"></div>
      </div>
      <!-- 二, 病历内容 -->
      <div class="medicalDetail_content">
        <form class="medicalDetail_content_form" action="###" method="get">
          <!-- 左 -->
          <div class="medicalDetail_con_side">
            <div class="detail_con_left_side_row">
              <p>患者姓名</p>
              <input class="detail_inp10" type="text" v-model="patientInfo.p_name" />
            </div>
            <div class="detail_con_left_side_row detail_side_doubuleCol">
              <div>
                <p>性别</p>
                <input
                  class="detail_inp8"
                  type="text"
                  list="genderlist"
                  v-model="patientInfo.p_gender"
                />
                <!-- <datalist id="genderlist">
									<option value="男">男</option>
									<option value="女">女</option>
                </datalist>-->
              </div>
              <div>
                <p>年龄</p>
                <input class="detail_inp8" type="text" v-model="patientInfo.p_age" />
              </div>
            </div>
            <div class="detail_con_left_side_row detail_side_doubuleCol">
              <div>
                <p>住院状态</p>
                <input
                  class="detail_inp8"
                  type="text"
                  list="genderlist"
                  v-model="patientInfo.p_hopState"
                />
                <!-- <datalist id="genderlist">
									<option value="男">男</option>
									<option value="女">女</option>
                </datalist>-->
              </div>
              <div>
                <p>入院日期</p>
                <input class="detail_inp8" type="text" v-model="patientInfo.p_hopTime" />
              </div>
            </div>
            <div class="detail_con_left_side_row">
              <p>联系电话</p>
              <input class="detail_inp10" type="text" v-model="patientInfo.p_phone" />
            </div>
            <div class="detail_con_left_side_row">
              <p>预计出院日期</p>
              <input class="detail_inp10" type="text" v-model="patientInfo.p_leaveHop" />
            </div>
          </div>
          <!-- 中 -->
          <div class="medicalDetail_con_mid">
            <div class="detail_con_left_side_row">
              <p>病床号码</p>
              <input class="detail_inp10" type="text" v-model="patientInfo.p_bedNum" />
            </div>
            <div class="detail_con_left_side_row">
              <p>病情描述</p>
              <input class="detail_inp10" type="text" v-model="patientInfo.p_sickDes" />
            </div>
            <div class="detail_con_left_side_row">
              <p>过敏史</p>
              <input class="detail_inp10" type="text" v-model="patientInfo.p_allergy" />
            </div>
            <div class="detail_con_left_side_row">
              <p>主治医生</p>
              <input class="detail_inp10" type="text" v-model="patientInfo.p_doctor" />
            </div>
            <div class="detail_con_left_side_row">
              <p>责任护士</p>
              <input class="detail_inp10" type="text" v-model="patientInfo.p_nurse" />
            </div>
          </div>
          <!-- 右 -->
          <div class="medicalDetail_con_side">
            <div class="detail_con_right_side_row">
              <p>用药详情</p>
              <textarea class="detail_inp10 diseaseTextarea" v-model="patientInfo.p_medicationDes"></textarea>
            </div>
            <div class="detail_con_right_side_row">
              <p>备注</p>
              <textarea class="detail_inp10 diseaseTextarea" v-model="patientInfo.p_remark"></textarea>
            </div>
            <div class="detail_con_right_side_row">
              <p>上传诊断报告</p>
              <div
                class="detail_upload_wrap detail_inp10 diseaseTextarea"
                v-model="patientInfo.p_diagnoseReport"
              >
                <input class="detail_upload" type="file" />
              </div>
            </div>
          </div>
          <!-- 下 -->
          <div class="medicalDetail_con_bot">
            <input class="detail_save" type="button" value="保存" @click="saveMedical" />
            <router-link to="/EMedicalRecord">
              <!-- PS: 感觉这里直接跳转有点坑了, 是不是后期加个弹窗, 缓冲下 -->
              <input class="detail_cancle" type="button" value="取消" />
            </router-link>
          </div>
        </form>
      </div>
    </div>
    <!-- 手机号码搜索框 -->
    <div v-show="isShowMask" class="addMedical_alert">
      <div class="alert">
        <!-- 标题提示信息 -->
        <div class="alert_title">
          <h2 v-show="isPatient" class="fl">查询</h2>
          <h2 v-show="!isPatient" class="fl">提示</h2>
          <div class="fr">
            <i class="fa fa-times-circle-o" @click="closeMask"></i>
          </div>
        </div>
        <!-- 警示内容 -->
        <div class="alert_content">
          <!-- 查询时, 显示的内容 -->
          <div v-show="isPatient" class="alert_con_check">
            <p>请输入手机号：</p>
            <div class="alertIpt_wrapDiv">
              <input
                type="text"
                class="phoneNum"
                autofocus="autofocus"
                placeholder="请输入手机号查询已有病历"
                v-model="phoneNum"
              />
            </div>
          </div>
          <!-- 提示时, 显示的内容 -->
          <div v-show="!isPatient" class="alert_con_tip">
            <p>未找到患者信息，请输入正确手机号</p>
          </div>
        </div>
        <!-- 按钮 -->
        <div class="alert_button">
          <!-- 查询时, 显示的内容 -->
          <div v-show="isPatient" class="alert_button_check">
            <input class="alert_surebtn" type="button" value="确定" @click="alertCheckSureBtn" />
            <router-link class="cancleBtn" to="/HospitalizationManagement">
              <!-- PS: 感觉这里直接跳转有点坑了, 是不是后期加个弹窗, 缓冲下 -->
              <input class="alert_canclebtn" type="button" value="取消" />
            </router-link>
          </div>
          <!-- 提示时, 显示的内容 -->
          <div v-show="!isPatient" class="alert_button_tip">
            <input class="alert_surebtn" type="button" value="确定" @click="alertTipSureBtn" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "AddMedical",
  data() {
    return {
      phoneNum: "", // 存储电话号码
      patientInfo: {
        p_id: "",
        p_name: "张某某",
        p_gender: "男",
        p_age: "34",
        p_hopState: "已住院",
        p_hopTime: "2018-12-3",
        p_phone: "155 8888 9999",
        p_leaveHop: "2019-2-3",
        p_bedNum: "3204",
        p_sickDes: "感冒, 发烧, 流鼻涕, 腰酸, 背痛, 腿抽筋",
        p_allergy: "无",
        p_doctor: "张医生",
        p_nurse: "王护士",
        p_medicationDes: "扑尔敏, 阿莫西林胶囊, 头孢",
        p_remark: "有吸烟喝酒史",
        p_diagnoseReport: "暂缺"
      }, // 存储查询到的病人信息
      isShowMask: true, // 存储是否展示遮罩层
      isPatient: true // 存储是否存在患者信息
    };
  },
  methods: {
    saveMedical: function() {
      alert("要保存信息的");
    },
    alertCheckSureBtn: function() {
      /**
       * 在这里, 应该根据用户输入的手机号进行判断;
       * 如果用户提供的手机号能够查询到之前的就诊信息, 则显示最新的就诊信息到页面中;
       * 如果用户提供的手机号无法查到对应的就诊信息, 则显示"未找到患者信息, 请输入正确手机号"警示框
       */
      alert("用户输入了手机号" + this.phoneNum);
      // 发送网络请求到后台, 根据用户的手机号, 查询对应的病人, 获取基本信息.
      if (false) {
        // 获取到了对应的信息
        // 1, 给病人数据对象赋值

        // 2, 页面遮罩层消失
        this.isShowMask = false;
      } else {
        // 没有获取到对应的信息 ---- 显示 "未找到患者信息" 提示框
        this.isPatient = false; // 没有找到对应的患者信息
      }
    },
    alertTipSureBtn: function() {
      // 医生点击 "提示" 时的确定按钮, 这个时候, 要返回输入电话的警示框状态
      this.isPatient = true;
    },
    closeMask: function() {
      // 页面遮罩层消失
      this.isShowMask = false;
    }
  }
};
</script>
<style scoped>
/* 引入外部样式 */
@import url("../../css/EMedicalDetail.css");
/* 警示框样式 */
@import url("../../css/AlertBox.css");

/* 头部添加病历 调整背景 */
.addPatient_wrap .lookMedical {
  background: url(../../assets/title_bg.png) no-repeat 5px -48px;
}
.lookMedical a {
  color: #797979;
}

.addPatient_wrap .add_medical_hover {
  background: url(../../assets/title_bg.png) no-repeat 5px 0px;
  /* 鼠标形状 */
  /* cursor: pointer; */
}
.add_medical_hover a {
  color: white;
}
.add_medical_title a {
  margin-top: 10px;
}

/* 字体大小 */
.medicalDetail_content_form input {
  font-size: 14px;
}
</style>